<template>
	<view class="wrap" style="padding-bottom: 60px;">
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<!-- 当前套餐 -->
		<view v-if="current === 0">
			<view class="search">
				<u-search v-model="keywords" @custom="search" @search="search"></u-search>
			</view>
			<u-card class="task-list-item" :border="false" padding="20" margin="20rpx">
				<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;font-size: 30rpx;">检察官</view>
				</view>
				<view class="" slot="body">
					<u-row gutter="16">
						<u-col span="12">
							<view class="apply-text"><span>角色名称：</span>检察官</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>描述：</span>负责志愿者管理、审核举报线索</view>
						</u-col>
					</u-row>
				</view>
			</u-card>
			
			<u-card class="task-list-item" :border="false" padding="20" margin="20rpx">
				<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;font-size: 30rpx;">志愿者基地</view>
				</view>
				<view class="" slot="body">
					<u-row gutter="16">
						<u-col span="12">
							<view class="apply-text"><span>角色名称：</span>志愿者基地</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>描述：</span>发布任务、学习资料、评价等</view>
						</u-col>
					</u-row>
				</view>
			</u-card>
			
			<u-card class="task-list-item" :border="false" padding="20" margin="20rpx">
				<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;font-size: 30rpx;">志愿者</view>
				</view>
				<view class="" slot="body">
					<u-row gutter="16">
						<u-col span="12">
							<view class="apply-text"><span>角色名称：</span>志愿者</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>描述：</span>完成任务、学习资料、打卡等</view>
						</u-col>
					</u-row>
				</view>
			</u-card>
			<!-- 行政部门 -->
			<u-card class="task-list-item" :border="false" padding="20" margin="20rpx">
				<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;font-size: 30rpx;">行政部门</view>
				</view>
				<view class="" slot="body">
					<u-row gutter="16">
						<u-col span="12">
							<view class="apply-text"><span>角色名称：</span>行政部门</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>描述：</span>管理人员，审核，发布任务</view>
						</u-col>
					</u-row>
				</view>
			</u-card>
			
			<!-- 悬浮框 -->
			
		  <uni-fab  ref="fab" @fabClick="navTo('/pages/sys/workbench/add-form41')"/>

		</view>
	
		<view v-if="current === 1">
		<uni-fab ref="fab" @fabClick="navTo('/pages/sys/workbench/add-form42')"/>
			<view class="search">
				<u-search v-model="keywords" @custom="search" @search="search"></u-search>
			</view>
			
			<u-card v-for="(user,index) in listpeople" :key="index" class="task-list-item" :border="false" padding="20" margin="20rpx">
				<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;font-size: 30rpx;">{{user.userName}}</view>
				</view>
				<view class="" slot="body">
					<u-row gutter="16">
						<u-col span="12">
							<view class="apply-text"><span>姓名：</span>{{user.userName}}</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>角色：</span>{{user.quanxian}}</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>身份证号码：</span>{{user.userNumber}}</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>电话号码：</span>{{user.phoneNumber}}</view>
						</u-col>
					</u-row>
					</view>
			</u-card>
			
				</view>
				
			</u-card>
		
		</view>
		
	</view>
</template>
<script>
export default {
		data() {
			return {
			// oldlistPeople:[{
		 //    	quanxian:"",
			// 	userName:"",
			// 	phoneNumber:"",
			// 	userNumber:"",
		 //    }],
			keywords:"",
		    listpeople:[{
		    	quanxian:"志愿者",
				userName:"李毅",
				phoneNumber:"177****1233",
				userNumber:"12312312",
		    }],
		  
			list: [{
				name: '角色管理'
			}, {
				name: '人员管理',
			}],
			m2mSimflowList:[],
			m2mOrderFlowList:[],
			current: 0,
			status: 'loadmore',
			iconType: 'circle',
			isDot: false,
			loadText: {
						loadmore: '点击加载更多',
						loading: '正在加载...',
						nomore: '没有更多了'
			},
			}
		},
		created(){
		},
		onLoad(option) {
		if(option.data)
		  {
			
	        this.listpeople.push(JSON.parse(decodeURIComponent(option.data)))
		    console.log(this.listpeople)
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			// fabClick() {
			// 				uni.showToast({
			// 					title: '点击了悬浮按钮',
			// 					icon: 'none'
			// 				})
			// 			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			}
		}

	}
</script>
<style lang="scss" scoped>
@import 'index.scss';
page {
	background-color: #f5f5f5;
}
.wrap .search{
	background: #ffffff;
}
.apply-text{
	font-size: 28rpx;
	color: #333333;
	span{
		color: #999999;
	}
}
.user-images{
	width: 28px;
	height:28px;
	margin-right: 8px;
}
.apply-list-foot{
	font-size: 28rpx;
}
.personnel-list{
	display: flex;
	align-items: center;
	flex-wrap:wrap;
	.personnel-user{
		position: relative;
		margin: 5px 9px 0;
	}
	.user-images{
		width: 48px;
		height:48px;
		margin-right:0;
		
	}
	.iconfont{
		position: absolute;
		top:-12px;
		right:-5px;
		color: #FE0100;
	}
	
	.warp {
			padding: 10px;
		}

}
</style>
